<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue basic</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
        <p>{{reservedMsg}}</p>
        <p>number1:{{number1.count}}</p>
        <p>number2: {{count}}</p>
        <p>number3:{{number3}}</p>
        <button @click="changeMsg">改变message的值</button>
        <button @click="changeNumber1">改变number1的值</button>
        <button @click="changeNumber2">改变number2的值</button>
        <button @click="changeNumber3">改变number3的值</button>
    </div>
    <script>
        const { createApp, ref, computed, reactive, toRefs, toRef } = Vue;
        const App = {
            setup() {
                const msg = ref("Hello, Vue3!");
                const number1 = reactive({ count: 0 })
                const number2 = reactive({ count: 0 })
                let state = reactive({
                    foo: 1,
                    bar: 2
                });
                let number3 = toRef(state, "foo")
                const reservedMsg = computed(() => {
                    return msg.value.split(",").reverse().join();
                });
                const changeMsg = () => {
                    msg.value = "Hello, world!";
                }

                const changeNumber1 = () => {
                    number1.count++;
                }
                const changeNumber2 = () => {
                    number2.count++;
                }
                const changeNumber3 = () => {
                    state.foo++;
                    // number3++;
                }
                return {
                    msg,
                    reservedMsg,
                    changeMsg,
                    number1,
                    changeNumber1,
                    ...toRefs(number2),
                    changeNumber2,
                    number3,
                    changeNumber3
                }
            }
        }

        createApp(App).mount("#app")
    </script>
</body>

</html>